<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>家庭总收支</title>
    <script src="/echarts-table/echarts.min.js"></script>
    <link href="/semantic-ui/semantic.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--ECharts容器-->
<div id="container" style="width: 1000px;height:600px;left: 25%;margin-top: 10px"></div>
<!--=选择年份=-->
<div class="ui form success" style=" width:800px; left:30%;margin-top: 0; !important;">
    <form class="ui form" th:action="@{/yearMoney}" method="POST" th:object="${yearchosen}">
        <label>账单年份</label>
        <select class="ui dropdown" name="yearchosen">
            <option value="" disabled selected>请选择年份</option>
            <option th:each="year : ${yearlist}"
                    th:value="${year}"
                    th:text="${year}"
                    th:selected="${yearchosen == year}">
            </option>
        </select>
        <div style="display: flex;justify-content: center;align-items: center;margin-top: 10px;">
            <button class="ui  submit blue button" style="width:400px;" type="submit">展示该年份</button>
        </div>
    </form>
    <div style="display: flex;justify-content: center;align-items: center;margin-top: 10px;">
        <button class="ui submit red button" onclick="location.reload();" style="width:400px;">重置</button>
        <a th:href="@{/ledger}" class="ui green basic button"
           style="position: absolute; margin-top: 15%; right: 365px; transform: translateY(-50%);">返回</a>
    </div>
</div>

<!--绘制容器参数和图表-->
<script type="text/javascript" th:inline="javascript">
    //在js读取thymeleaf变量值
    let data1 = [[${data1Json}]];
    let data3 = [[${data3Json}]];
    let data2 = [[${data2Json}]];

    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
        title: {
            text: '家庭年总收支情况',
            subtext: 'Ciallo～(∠・ω< )⌒★'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            y: 80,    //上下距离
        },
        legend: {
            data: ['收入', '支出']
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                name: "月份",
                // prettier-ignore
                data: JSON.parse(data1)
            }
        ],
        yAxis: [
            {
                name: "金额",
                type: 'value'
            }
        ],
        series: [
            {
                name: '收入',
                type: 'bar',
                data: JSON.parse(data2),
                markPoint: {
                    data: [
                        {type: 'max', name: 'Max'},
                        {type: 'min', name: 'Min'}
                    ]
                },
                markLine: {
                    data: [{type: 'average', name: 'Avg'}]
                }
            },
            {
                name: '支出',
                type: 'bar',
                data: JSON.parse(data3),
                markPoint: {
                    data: [
                        {type: 'max', name: 'Max'},
                        {type: 'min', name: 'Min'}
                    ]
                },
                markLine: {
                    data: [{type: 'average', name: 'Avg'}]
                }
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>